<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品</title>
	<style>
	html,body{ margin: 0;}
	.row{
		width:100%;
		height:300px;
	}
	.col{
		width:200px;
		height:216px;
		margin: 0px 1px 0px 1px; padding-top: 2px;
		border:solid black 1px;
		float:left;
		text-align:center;
	}
	.col img { 
		width: 150px;
		}
	.num{
		pointer-events:none;
	}
	</style>
	
</head>
<body>
	<!--这里写购物车代码-->
	<div>
	<table border="1" width="80%">
		<thead>
			<tr>
				<th><input type="checkbox" id="checks" ></th>
				<th>名称</th>
				<th>图片</th>
				<th>价格</th>
				<th>数量</th>
				<th>移除</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<th><input type="checkbox" name="check" ></th>
				<td>商品1</td>
				<td><img src="img/嘉陵摩托.png" width="100"></td>
				<td class="jiage">4999.00</td>
				<td>
					<input type="button" class="left" value="-" >
					<input type="text" class="num" value="0" onchange="calculate()">
					<input type="button" class="right" value="+" >
				</td>
				<td><input type="button" value="移除" class="del"></td>
			</tr>
			
			<tr>
				<th><input type="checkbox" name="check" ></th>
				<td>商品2</td>
				<td><img src="img/小电驴.png" width="100"></td>
				<td class="jiage">1100.00</td>
				<td>
					<input type="button" class="left" value="-" >
					<input type="text" class="num" value="0" onchange="calculate()">
					<input type="button" class="right" value="+" >
				</td>
				<td><input type="button" value="移除" class="del"></td>
			</tr>
			
			<tr>
				<th><input type="checkbox" name="check" ></th>
				<td>商品3</td>
				<td><img src="img/五菱宏光.png" width="100"></td>
				<td class="jiage">44000.00</td>
				<td>
					<input type="button" class="left" value="-" >
					<input type="text" class="num" value="0" onchange="calculate()">
					<input type="button" class="right" value="+">
				</td>
				<td><input type="button" value="移除" class="del"></td>
			</tr>
			
			<tr>
				<th><input type="checkbox" name="check" ></th>
				<td>商品4</td>
				<td><img src="img/桑塔纳.png" width="100"></td>
				<td class="jiage">84999.00</td>
				<td>
					<input type="button" class="left" value="-" >
					<input type="text" class="num" value="0" onchange="calculate()">
					<input type="button" class="right" value="+" >
				</td>
				<td><input type="button" value="移除" class="del"></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="6">总价<span id="total"></span> 元</td>
			</tr>
		</tfoot>
	</table>
	</div>
	
	<!-- 商品列表 -->
	<div class="row">
		<div class="col">
		  <p><span>商品1</span>价格:<span>4999.00</span></p>
		  <img src="img/嘉陵摩托.png">
		  <input type="button" value="添加至购物车" class="add">
		</div>
		<div class="col">
		  <p><span>商品2</span>价格:<span>1100.00</span></p>
		  <img src="img/小电驴.png">
			<input type="button" value="添加至购物车" class="add">
		</div>

		<div class="col">
		  <p><span>商品3</span>价格:<span>44000.00</span></p>
		  <img src="img/五菱宏光.png">
			<input type="button" value="添加至购物车" class="add">
		</div>
		<div class="col">
		  <p><span>商品4</span>价格:<span>84999.00</span></p>
		  <img src="img/桑塔纳.png">
		  <input type="button" value="添加至购物车" class="add">
		</div>
	</div>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(calculate);
		function calculate() {
			var check = $("input[type=checkbox]:not('#checks')");
			var oneP = $(".jiage");
			var nums = $(".num");
			var price = 0;
			for (var i = 0; i < check.length; i++) {
				if (check[i].checked){
					var num = Number(nums[i].value);
					var pri = Number(oneP[i].innerText);
					price += num*pri;

				}
			}
			$("#total").text(price);
		}

		$("#checks").click(function (){
			var flag = this.checked;
			$.each($("input[type=checkbox]:not('#checks')"),function () {
				this.checked = flag;
			})
			calculate();
		});

		$("input[type=checkbox]:not('#checks')").click(function () {
			var flag = $("#checks").prop("checked");
			var flag2 = true;
			$.each($("input[type=checkbox]:not('#checks')"),function () {
				flag2 = flag2&&this.checked;
			})
			$("#checks").prop("checked",flag2);
			calculate();
		});
		$(".right").click(function () {
			var re = this.previousElementSibling;
			re.value = Number(re.value)+1;
			calculate();
		})
		$(".left").click(function () {
			var re = this.previousElementSibling;
			re.value = Number(re.value)-1;
			calculate();
		})
		$(".del").click(function () {
			var el = this.parentElement.parentElement;
			el.remove();
			calculate();
		})
		$(".add").click(function () {

		})


	</script>
</body>
</html>
